import React from 'react';
import cs from 'classnames'
import BaseCmpt from '../BaseCmpt';
import './index.css';

const defaultImgUrl = 'http://cdn1.taojinzi.com/xcx/defaultimg1.png';

class MImage extends BaseCmpt {

    static defaultProps = {
        data: {
            type: 2,
            style: {
                backgroundSize: 'contain'
            },
            dataset: {
                url: ''
            },
            layout: {
                isAutoHeight: 1,
                isFullWidth: 1,
            }
        }
    };

    constructor(props) {
        super(props);
    }

    render() {
        var {onSelected, selected, data} = this.props;
        var {dataset, style, layout} = data;
        var isAutoHeight = !layout ? false : layout.isAutoHeight == 1;
        var isFullWidth = !layout ? false : layout.isFullWidth == 1;
        var styleObj = {
            backgroundImage: 'url(' + (dataset.url || defaultImgUrl) + ')',
            ...style
        };

        if (isFullWidth) {
            styleObj.width = '100%';
        }

        return (
            <div
                onClick={(e) => {
                    onSelected && onSelected(e)
                }}
                className={cs({'mImage cmptEle': true, 'cmptEle_selected': selected})}
            >
                <div className="mImage__imgWrap"
                     style={styleObj}>
                    <div
                        className="mImage__imgWrap__inner"
                        style={{
                            marginTop: isAutoHeight ? 0 : style.height
                        }}
                    >
                        {
                            isAutoHeight ?
                                <img className="mImage__imgWrap__inner__img"
                                     src={dataset.url || defaultImgUrl}/>
                                : null
                        }

                    </div>
                </div>
            </div>
        );
    }
}

export default MImage;
